<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            height: 200px;
            width: 200px;
            border: 1px solid red;
            position: relative;
            margin: 250px auto;
            border-radius: 50%;
        }

        .circle {
            height: 30px;
            width: 30px;
            background-color: #00FF00;
            border-radius: 50%;
            position: absolute;
            text-align: center;
            line-height: 30px;
        }

        #hour {
            height: 10px;
            width: 60px;
            background-color: #0b333f;
            border-radius: 10px;
            position: absolute;
            left: 100px;
            top: 95px;
            transform-origin: left center;

        }

        #min {
            height: 8px;
            width: 70px;
            background-color: #ff6250;
            border-radius: 10px;
            position: absolute;
            left: 100px;
            top: 95px;
            transform-origin: left center;

        }

        #sec {
            height: 6px;
            width: 80px;
            background-color: #921bcd;
            border-radius: 10px;
            position: absolute;
            left: 100px;
            top: 95px;
            transform-origin: left center;

        }
    </style>

</head>
<body>
<div id="box">
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
</div>
</body>
<script>


    var box = document.getElementById("box");
    var hourDiv = document.getElementById("hour");
    var minDiv = document.getElementById("min");
    var secDiv = document.getElementById("sec");
    var boxWidth = box.offsetWidth;
    var R = boxWidth / 2;
    var PI = Math.PI;

    for (var i = 1; i <= 12; i++) {
        var deg = i * 30 - 90;

        var circle = document.createElement("div");
        circle.className = "circle"
        circle.innerHTML = i;
        box.appendChild(circle);

        var x = Math.cos(2 * PI * deg / 360) * R + R - circle.offsetWidth / 2 + "px";
        var y = Math.sin(2 * PI * deg / 360) * R + R - circle.offsetWidth / 2 + "px";

        circle.style.left = x;
        circle.style.top = y;
    }

    showTime();
    function showTime() {
        var date = new Date();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();

        var hourDeg = hour * 30 + min / 60 * 30 - 90;//时针的度数
        var minDeg = min * 6 - 90;
        var secDeg = sec * 6 - 90;
        hourDiv.style.transform = "rotate(" + hourDeg + "deg)"
        minDiv.style.transform = "rotate(" + minDeg + "deg)"
        secDiv.style.transform = "rotate(" + secDeg + "deg)"
    }
    setInterval(showTime, 1000);
//https://www.cnblogs.com/xiaohuochai/p/5974676.html
</script>
</html>